<script>
	import {
		useSiteDataApi,
		useArticleApi,
		useActiveApi
	} from "@/api/homePage";

	import {
		getBySiteAndArea,
		getPopupads,
		weatherInfo
	} from "@/api/ws";
	import Config from "@/config";
	import TabBar from "@/components/layout/tabbar/index.vue";
	import NoticeBar from "@/components/layout/hz/notice-bar.vue";
	import HzSafeArea from "@/components/layout/hz/hz-safe-area.vue";
	import ZPMixin from "@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin";
	import amapFile from "@/utils/amap-wx.130.js";
	import wybPopup from "@/components/wyb-popup/wyb-popup.vue";
	import {
		getShopBgList,
		getGoodsList
	} from "@/api/mall";

	export default {
		name: "homeIndex",
		components: {
			HzSafeArea,
			TabBar,
			NoticeBar,
			wybPopup,
		},
		mixins: [ZPMixin],
		data() {
			return {
				uavData: [],
				paging: null,
				homeConfig: [],
				imgUrl: Config.imgUrl,
				siteId: [],
				loading: true,
				loadingStatus: "loadmore",
				activeTabs: 0,
				initialStates: {
					logo: false,
					banner: false,
					zone: false,
				},
				// 骨架状态
				skeletonStates: {
					spotList: false,
					travelGuide: false,
					zone: false,
					activities: false,
				},
				timer: null,
				// 以下都是各模块的动态数据
				logo: "",
				weather: null,
				banner: null,
				announcement: {},
				fastService: [],
				menu: [],
				spotList: [],
				travelGuide: [],
				zone: [],
				activeGuideTab: 0,
				activities: [],
				activeGuide: [],
				tabsIcon: "",
				currentArea: "", // 当前选择的区域
				// 语言切换相关
				currentLanguage: uni.getStorageSync("language") || "zh-CN",
				languageOptions: [{
						value: "zh-CN",
						label: "中文",
					},
					{
						value: "en-US",
						label: "English",
					},
				],
				adsData: null,
			};
		},

		onLoad() {
			// 从存储中恢复位置选择信息
			const storedLocation = uni.getStorageSync("selectedLocation");
			if (storedLocation) {
				this.$store.commit("setSelectedLocationHome", storedLocation);
			}

			// 从存储中恢复语言设置
			const storedLanguage = uni.getStorageSync("language");
			if (storedLanguage) {
				this.currentLanguage = storedLanguage;
				this.$i18n.locale = storedLanguage;
			}

			this.init();
			this.queryWeather();
			this.getLocation();
			this.getUAVData();
			this.getPopupAdsData();
			this.tabsIcon = this.imgUrl + "upload/img/ws_static/static/home/eatImg.png";
		},
		onShow() {
			if (this.heavyLoad) this.init();
		},
		computed: {
			safeAreaTop() {
				return this.$store.state.app.wxMenuClient.top;
			},
			homeSite() {
				return Config.site.home.children;
			},
			zoneSite() {
				return Object.values(this.homeSite.zone.children)?.map(
					(item) => item.value
				);
			},
			bannerUrl() {
				return this.banner?.map((item) => item.CoverImg);
			},
			// 位置选择相关
			locationList() {
				return this.$store.state.base.locationList;
			},
			selectedLocation() {
				return this.$store.state.base.selectedLocation;
			},
			heavyLoad() {
				return this.$store.state.base.homeHeavyLoad;
			},
			imgUrlList() {
				return this.uavData.map(item => `${item.imgUrl}`);
			}
		},
		methods: {
			callPhone(){
				uni.makePhoneCall({
					phoneNumber: '13106822191' 
				});
			},
			goLink(item) {
				console.log("item =>", item);
				uni.navigateTo({
					url: item.link,
				});
			},
			closeAdsPopup() {
				this.$refs.adsPopup.close(); // 隐藏
			},
			adsImgFN() {
				console.log("======== 点击内容 ========");
			},
			changeAdsPopup(e) {
				if (e && !e.show) {
					console.log("======== 关闭广告 ========");
				}
			},
			async getPopupAdsData() {
				setTimeout(() => {
					let popup = uni.getStorageSync("index_popup") || "";
					if (popup) {
						console.log("popup =>", popup);
						console.log("已弹过弹窗");
					} else {
						getPopupads("INDEX")
							.then((res) => {
								console.log("获取弹窗广告 res=>", res);
								if (res.code == 200) {

									if (res.result.mapAreaConfig) {
										// console.log("res.result.mapAreaConfig =>",res.result.mapAreaConfig);
										// console.log("JSON.parse(res.result.mapAreaConfig) =>",JSON.parse(res.result.mapAreaConfig));
										res.result.hotZone = JSON.parse(res.result.mapAreaConfig)
									}
									this.adsData = res.result;
									if (this.adsData && this.adsData.imageUrl) {
										this.$nextTick(() => {
											this.$refs.adsPopup.open(); // 显示
										});
									}
									uni.setStorageSync("index_popup", res.result);
								} else {
									this.adsData = null;
								}
								console.log("adsData ==============>", this.adsData);
							})
							.catch((e) => {
								console.log(e);
							});
					}
				}, 500);
			},
			developing() {
				uni.showToast({
					title: "即将上线，敬请期待",
					icon: "none",
					duration: 3000,
				});
			},
			async getUAVData() {
				const params = {
					siteId: 1,
					scenicAreaId: 1,
				};
				const {
					result
				} = await getBySiteAndArea(params);
				this.uavData = result;
			},
			viewUAV() {
				uni.openEmbeddedMiniProgram({
					appId: "wx478a55bcd780de3a",
				});
			},
			// 初始化
			async init() {
				try {
					this.loading = true;
					// 1.获取配置
					const res = await this.getHome();
					// 2.生成请求队列
					this.siteId = res.Data?.map((item) => item.Id);
					console.log(this.siteId);
					// 3.设置初始加载状态
					// 定义模块加载顺序，logo, banner模块是固定前两个
					const module = [
						"announcement",
						"fastService",
						"menu",
						"spotList",
						"travelGuide",
						"activeGuide",
					];
					module.forEach((key) => {
						if (this.siteId.includes(this.homeSite[key].value)) {
							this.initialStates[key] = false;
						}
					});
					console.log("-------this.initialStates", this.initialStates);

					// 4.定义加载队列
					// 加载项
					const first = ["logo", "banner", "announcement", "fastService", "menu"];
					const last = ["spotList", "travelGuide", "activeGuide"];
					// 队列及请求映射
					const firstQueues = [];
					const lastQueues = [];
					const requestMap = new Map(); // 使用Map跟踪请求和模块的关系

					first.forEach((key) => {
						if (key in this.initialStates) {
							console.log(this.homeSite[key].type);
							let promise = this.loadTheModule(this.homeSite[key].value);
							if (this.homeSite[key].type === "article") {
								promise = this.loadArticleData(this.homeSite[key].value);
							} else if (this.homeSite[key].type === "active") {
								promise = this.loadActiveData();
							}

							// 存储promise与key的映射关系
							requestMap.set(promise, key);
							firstQueues.push(promise);
						}
					});

					last.forEach((key) => {
						if (key in this.initialStates) {
							console.log(this.homeSite[key].type);

							// 如果是景点或者攻略相关的模块，根据选择的位置进行过滤
							let locationParam = {};
							if (key === "spotList" || key === "travelGuide" || "activeGuide") {
								// 如果不是"全部景区"，则添加位置过滤参数
								if (this.selectedLocation.value !== 0) {
									locationParam = {
										AreaId: this.selectedLocation.value,
									};
								}
							}

							let promise = this.loadTheModule(
								this.homeSite[key].value,
								locationParam
							);
							if (this.homeSite[key].type === "article") {
								promise = this.loadArticleData(
									this.homeSite[key].value,
									locationParam
								);
							} else if (this.homeSite[key].type === "active") {
								promise = this.loadActiveData(locationParam);
							}

							// 存储promise与key的映射关系
							requestMap.set(promise, key);
							lastQueues.push(promise);
						}
					});

					// 5.分段加载
					Promise.allSettled(firstQueues).then((results) => {
						// 处理每个结果，并知道它对应哪个模块
						results.forEach((result, index) => {
							const moduleKey = requestMap.get(firstQueues[index]);
							console.log(`模块 ${moduleKey} 加载结果:`, result);

							if (result.status === "fulfilled") {
								// 根据模块类型处理数据
								this.processModuleData(moduleKey, result.value);
							} else {
								console.error(`模块 ${moduleKey} 加载失败:`, result.reason);
							}
						});

						// 这里手动加上0.5s延迟，不影响前面的渲染速度
						setTimeout(() => {
							Promise.allSettled(lastQueues)
								.then((results) => {
									// 处理每个结果
									results.forEach((result, index) => {
										const moduleKey = requestMap.get(lastQueues[
											index]);
										console.log(`模块 ${moduleKey} 加载结果:`, result);

										if (result.status === "fulfilled") {
											// 根据模块类型处理数据
											this.processModuleData(moduleKey, result
												.value);
										} else {
											console.error(`模块 ${moduleKey} 加载失败:`, result
												.reason);
										}
									});
									// 处理后置数据
									this.$refs.paging.reload();
								})
								.finally(() => {
									this.loading = false;
								});
						}, 500);
					});
				} catch (error) {
					console.error("初始化错误:", error);
					this.loading = false;
				}
			},
			// 处理模块数据的方法
			processModuleData(moduleKey, data) {
				console.log(`处理模块 ${moduleKey} 数据:`, data);
				// 根据不同模块处理数据
				switch (moduleKey) {
					case "logo":
						this.logo = data.Data[0].CoverImg;
						break;
					case "banner":
						// 处理轮播数据
						this.banner = data.Data;
						break;
					case "announcement":
						// 处理公告数据，拼接所有title字段，用两个全角空格隔开
						this.announcement = data.Data.map(item => item.Title).join('　　');
						break;
					case "fastService":
						// 处理公告数据
						this.fastService = data.Data.map((item) => {
							return {
								img: item.ImgUrl,
								linkUrl: item.LinkUrl,
							};
						});
						break;
					case "menu":
						// 处理菜单数据
						this.menu = data.Data.map((item) => {
							return {
								id: item.Id,
								title: item.Name,
								icon: item.ImgUrl,
								linkUrl: item.LinkUrl,
							};
						});
						break;
					case "spotList":
						// 处理景点数据
						console.log("data.Data ==============>", data.Data);
						this.spotList = data.Data.map((item) => {
							return {
								id: item.Id,
								title: item.Name,
								image: item.ImgUrl,
								time: item.AddTime?.substring(0, 10),
							};
						});
						break;
					case "travelGuide":
						// 处理游玩攻略数据
						this.travelGuide = data.Data.map((item) => {
							return {
								id: item.Id,
								title: item.Title,
								image: item.CoverImg,
								tag: item.Abstract,
							};
						});
						break;
					case "activeGuide":
						this.activeGuide = data.Data.map((item) => {
							return {
								id: item.Id,
								title: item.Name,
								image: item.Img,
								tag: item.Describe || "精选活动",
								price: item.ShowPrice,
								type: item.Type,
							};
						});
						break;
					default:
						break;
				}
				this.initialStates[moduleKey] = true;
			},
			// 获取首页配置
			async getHome() {
				return useSiteDataApi(Config.site.home.value);
			},
			// 加载模块
			async loadTheModule(moduleId, additionalParams = {}) {
				return useSiteDataApi(moduleId, additionalParams);
			},
			// 加载模块数据
			async loadArticleData(ArticleCategoryId, additionalParams = {}) {
				return useArticleApi({
					ArticleCategoryId,
					...additionalParams,
				});
			},
			async loadActiveData(additionalParams = {}) {
				const params = {
					TypeId: 18,
					Index: 1,
					Size: 6,
					FiledOrder: 'Sort desc',
					...additionalParams,
				}
				return useActiveApi(params);
			},
			// 加载专区数据
			queryList(pageNo, pageSize) {
				console.log(pageNo, pageSize);
				this.skeletonStates.zone = true;
				setTimeout(() => {
					getShopBgList({
							BusinessClassify: this.zoneSite[this.activeTabs],
							Index: pageNo,
							Size: pageSize,
							FiledOrder: "Sort desc",
							IsHot: 1,
							AreaId: this.selectedLocation.value,
						})
						.then((res) => {
							this.$refs.paging.complete(
								res.Data?.map((item) => {
									// tags处理，最多3个
									let tagsArr = [];
									if (Array.isArray(item.Tags)) {
										tagsArr = item.Tags.slice(0, 3);
									} else if (typeof item.Tags === "string" && item.Tags) {
										tagsArr = item.Tags.split(",").slice(0, 3);
									}
									return {
										id: item.Id,
										type: item.BusinessClassify,
										title: item.ShopName,
										image: item.ShopLogo,
										time: item.AddTime,
										tags: tagsArr,
									};
								})
							);
						})
						.catch(() => {
							this.$refs.paging.complete(false);
						})
						.finally(() => {
							this.initialStates.zone = true;
							this.skeletonStates.zone = false;
						});
				}, 500);
			},
			async queryWeather() {
				// let _this = this;
				// const myAmapFun = new amapFile.AMapWX({
				// 	key: Config.map_key,
				// });
				// myAmapFun.getWeather({
				// 	city: "珠海",
				// 	success: function(data) {
				// 		console.log("数据温度", data);
				// 		//成功回调
				// 		_this.weather = {
				// 			temperature: data.liveData.temperature,
				// 			weather: data.liveData.weather,
				// 			winddirection: data.liveData.winddirection,
				// 			windpower: data.liveData.windpower,
				// 		};
				// 		if (_this.weather.weather.includes("晴")) {
				// 			_this.weather.imgurl =
				// 				Config.imgUrl + "/Content/images/weather/晴.png";
				// 		} else if (_this.weather.weather.includes("雨")) {
				// 			_this.weather.imgurl =
				// 				Config.imgUrl + "/Content/images/weather/雨.png";
				// 		} else if (_this.weather.weather.includes("阴")) {
				// 			_this.weather.imgurl =
				// 				Config.imgUrl + "/Content/images/weather/阴.png";
				// 		} else if (_this.weather.weather.includes("云")) {
				// 			_this.weather.imgurl =
				// 				Config.imgUrl + "/Content/images/weather/多云.png";
				// 		} else if (_this.weather.weather.includes("雪")) {
				// 			_this.weather.imgurl =
				// 				Config.imgUrl + "/Content/images/weather/雪.png";
				// 		} else if (_this.weather.weather.includes("风")) {
				// 			_this.weather.imgurl =
				// 				Config.imgUrl + "/Content/images/weather/风.png";
				// 		} else {
				// 			_this.weather.imgurl =
				// 				Config.imgUrl + "/Content/images/weather/阴.png";
				// 		}
				// 		uni.setStorageSync("weather", _this.weather);
				// 	},
				// 	fail: function(info) {
				// 		//失败回调
				// 		console.log(info);
				// 	},
				// });
				try {
					let _this = this;
					let res = await weatherInfo();
					console.log("获取天气数据 res===========>", res);
					if (res.code == 200) {

						//成功回调
						let data = res.result.lives[0];
						_this.weather = {
							temperature: data.temperature,
							weather: data.weather,
							winddirection: data.winddirection,
							windpower: data.windpower,
						};
						if (_this.weather.weather.includes("晴")) {
							_this.weather.imgurl =
								Config.imgUrl + "/Content/images/weather/晴.png";
						} else if (_this.weather.weather.includes("雨")) {
							_this.weather.imgurl =
								Config.imgUrl + "/Content/images/weather/雨.png";
						} else if (_this.weather.weather.includes("阴")) {
							_this.weather.imgurl =
								Config.imgUrl + "/Content/images/weather/阴.png";
						} else if (_this.weather.weather.includes("云")) {
							_this.weather.imgurl =
								Config.imgUrl + "/Content/images/weather/多云.png";
						} else if (_this.weather.weather.includes("雪")) {
							_this.weather.imgurl =
								Config.imgUrl + "/Content/images/weather/雪.png";
						} else if (_this.weather.weather.includes("风")) {
							_this.weather.imgurl =
								Config.imgUrl + "/Content/images/weather/风.png";
						} else {
							_this.weather.imgurl =
								Config.imgUrl + "/Content/images/weather/阴.png";
						}
						uni.setStorageSync("weather", _this.weather);
					}
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: "获取天气数据失败",
						icon: "none",
					});
				}

			},
			// 下拉刷新
			refresh() {
				console.log("下拉");
				// 这里主要是给景点和攻略两个模块做数据更新用的，专区的数据会在触发这个事件的同时一并更新
				this.skeletonStates.spotList = true;
				this.skeletonStates.travelGuide = true;

				// 如果当前在活动标签，则刷新活动数据
				if (this.activeGuideTab === 1) {
					this.skeletonStates.activities = true;
					setTimeout(() => {
						this.loadActivities();
					}, 500);
				}

				setTimeout(() => {
					this.skeletonStates.spotList = false;
					this.skeletonStates.travelGuide = false;
				}, 1000);
			},
			// 切换tabs
			switchTabs(index) {
				if (this.timer === null) {
					this.activeTabs = index;
					if (index == 1) {
						this.tabsIcon =
							this.imgUrl + "upload/img/ws_static/static/home/liveImg.png";
					} else if (index == 2) {
						this.tabsIcon =
							this.imgUrl + "upload/img/ws_static/static/home/playImg.png";
					} else {
						this.tabsIcon =
							this.imgUrl + "upload/img/ws_static/static/home/eatImg.png";
					}
					this.$refs.paging.clear();
					this.$refs.paging.refresh();
					this.timer = setTimeout(() => {
						this.timer = null;
					}, 1000);
				}
			},
			getLocation() {
				uni.authorize({
					scope: "scope.userLocation",
					success: () => {
						this.openLocation();
					},
					fail: (err) => {
						console.log("授权失败", err);
						uni.showModal({
							title: "授权失败",
							content: "请在设置中打开位置权限",
							showCancel: false,
							confirmText: "去设置",
							success: (res) => {
								if (res.confirm) {
									// 跳转到设置页面，引导用户手动打开位置权限
									uni.openSetting({
										success: (res) => {
											if (res.authSetting[
													"scope.userLocation"]) {
												this.openLocation(); // 重新尝试获取位置
											} else {
												uni.showToast({
													title: "请开启位置权限",
													icon: "none",
												});
											}
										},
									});
								}
							},
						});
					},
				});
			},
			openLocation() {
				uni.getLocation({
					type: "wgs84", // 返回可以用于wx.openLocation的经纬度
					success: (res) => {
						this.location = res; // 存储位置信息到data中或进行其他操作
						console.log("获取位置成功", res);
						const {
							latitude,
							longitude
						} = res;

						// 根据经纬度选择最近的岛屿
						this.selectNearestLocation(latitude, longitude);
					},
					fail: (err) => {
						console.log("获取位置失败", err);
						uni.showToast({
							title: "获取位置失败",
							icon: "none",
						});
					},
				});
			},

			// 计算两个坐标点之间的距离（单位：公里）
			calculateDistance(lat1, lon1, lat2, lon2) {
				const R = 6371; // 地球半径，单位km
				const dLat = this.deg2rad(lat2 - lat1);
				const dLon = this.deg2rad(lon2 - lon1);
				const a =
					Math.sin(dLat / 2) * Math.sin(dLat / 2) +
					Math.cos(this.deg2rad(lat1)) *
					Math.cos(this.deg2rad(lat2)) *
					Math.sin(dLon / 2) *
					Math.sin(dLon / 2);
				const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
				const distance = R * c; // 距离（公里）
				return distance;
			},

			// 角度转弧度
			deg2rad(deg) {
				return deg * (Math.PI / 180);
			},

			// 选择最近的岛屿
			selectNearestLocation(userLat, userLon) {
				// 排除"全部"选项(通常是第一个，index为0)
				const locationOptions = this.locationList.filter(
					(item) => item.value !== 0
				);

				if (locationOptions.length === 0) {
					return; // 如果没有可选岛屿，直接返回
				}

				let nearestLocation = null;
				let minDistance = Number.MAX_VALUE;

				// 遍历每个岛屿，计算距离
				locationOptions.forEach((location) => {
					// 检查是否有location对象
					if (location.location) {
						const {
							latitude,
							longitude
						} = location.location;

						const distance = this.calculateDistance(
							userLat,
							userLon,
							latitude,
							longitude
						);

						if (distance < minDistance) {
							minDistance = distance;
							nearestLocation = location;
						}
					}
				});

				// 如果找到了最近的岛屿，并且距离不超过20公里，则选择该岛屿
				// 否则选择"全部"选项
				if (nearestLocation && minDistance <= 20) {
					console.log(
						"选择最近的岛屿:",
						nearestLocation.title,
						"距离:",
						minDistance,
						"公里"
					);
					this.$store.commit("setSelectedLocationHome", nearestLocation);
				} else {
					console.log("没有找到20公里内的岛屿，选择全部");
					// 获取"全部"选项
					const allLocation = this.locationList.find((item) => item.value === 0);
					if (allLocation) {
						this.$store.commit("setSelectedLocationHome", allLocation);
					}
				}

				// 根据选择的位置刷新数据
				this.refreshByLocation(this.$store.state.base.selectedLocation);
			},
			traffic() {
				uni.navigateTo({
					url: "/pages/index/parkList",
				});
			},
			menuJumpHandle(menu) {
				console.log(menu);
				// if(menu.id == 3579){
				//  this.viewUAV();

				// }else{
				//  // 判断linkUrl是否包含问号，如果包含则拼接id参数，否则直接使用linkUrl
				//  const url = menu.linkUrl.includes("?")
				//    ? menu.linkUrl + "&id=" + menu.id
				//    : menu.linkUrl;
				//  uni.navigateTo({
				//    url: url,
				//  });
				// }
				// 判断linkUrl是否包含问号，如果包含则拼接id参数，否则直接使用linkUrl
				const url = menu.linkUrl.includes("?") ?
					menu.linkUrl + "&id=" + menu.id :
					menu.linkUrl;
				uni.navigateTo({
					url: url,
				});

			},
			attractionDetails(id, type) {
				console.log(id);
				uni.navigateTo({
					url: "/mall_subpages/raiders/details?id=" + id + "&type=" + type,
				});
			},
			jumpBanner(index) {
				if (this.banner[index].LinkUrl) {
					const resLinkArr = this.banner[index].LinkUrl.split("|");
					// 本小程序页面：path|/page/index
					// 外部小程序页面：out-path|wx12345667|/page/xxxx
					// web-view打开html页面：url|https://xxxx.com
					if (resLinkArr.length === 2) {
						const [type, path] = resLinkArr;
						if (type === "path")
							uni.navigateTo({
								url: path,
							});
						if (type === "url")
							uni.navigateTo({
								url: `/pages/webView/webView?url=${path}`,
							});
					} else if (resLinkArr.length === 3) {
						const [type, appId, path] = resLinkArr;
						if (type === "out-path")
							uni.navigateToMiniProgram({
								appId,
								path,
							});
					}
					return;
				}
				if (!this.banner[index].Abstract) return;
				uni.navigateTo({
					url: `/pages/article/index?id=${this.banner[index].Id}`,
				});
			},
			jumpArticle(id) {
				uni.navigateTo({
					url: `/pages/article/index?id=${id}`,
				});
			},
			jumpScenicSpot(name) {
				const id = this.spotList.find((item) => item.title === name)?.id;
				console.log("spotList ==========>", this.spotList);
				uni.navigateTo({
					url: `/scenicSpot_subpages/scenic/details?id=${id}`,
				});
			},
			jumpScenicSpotList() {
				uni.navigateTo({
					url: "/scenicSpot_subpages/raiders/list?id=3606",
				});
			},
			jumpActivitiesOrRaiders(type) {
				let url = "/scenicSpot_subpages/raiders/list?id=3607&attractions=true";
				if (type === "2") url = "/ticket_subpages/activities/list";
				uni.navigateTo({
					url,
				});
			},
			// 打开位置选择器
			openLocationSelector() {
				uni.showActionSheet({
					itemList: this.locationList.map((item) => item.title),
					success: (res) => {
						const selectedLocation = this.locationList[res.tapIndex];
						this.$store.commit("setSelectedLocationHome", selectedLocation);
						// 根据选择的位置刷新数据
						this.refreshByLocation(selectedLocation);
					},
				});
			},

			// 根据选择的位置刷新数据
			refreshByLocation(location) {
				// 这里可以根据选择的位置值进行数据刷新
				console.log("刷新位置数据:", location);
				// 重新加载页面数据
				this.init();
			},
			jumpMerchants(id, type) {
				uni.navigateTo({
					url: "/mall_subpages/merchants/detail?id=" + id + "&type=" + type,
				});
			},
			jumpAnnouncement() {
				uni.navigateTo({
					url: "/pages/announcement/index?id=3578",
				});
			},
			// 添加切换攻略/活动标签的方法
			switchGuideTab(index) {
				if (this.activeGuideTab !== index) {
					this.activeGuideTab = index;

					// 如果切换到热门活动且数据为空，则加载数据
					if (index === 1 && this.activities.length === 0) {
						this.loadActivities();
					}
				}
			},

			// 添加加载热门活动的方法
			loadActivities() {
				this.skeletonStates.activities = true;

				getGoodsList({
						BusinessId: 37,
						Index: 1,
						Size: 6,
						FiledOrder: "Sort desc"
					})
					.then((res) => {
						this.activities = res.Data.map((item) => {
							return {
								id: item.Id,
								title: item.Name,
								image: item.Img,
								tag: item.Describe || "精选活动",
								price: item.ShowPrice,
							};
						});
					})
					.catch((err) => {
						console.error("加载热门活动失败:", err);
						this.activities = [];
					})
					.finally(() => {
						this.skeletonStates.activities = false;
					});
			},

			// 跳转到活动详情页
			jumpActivity(item) {
				console.log("跳转到活动详情页 item=>", item);
				uni.navigateTo({
					url: `/mall_subpages/goods/index?id=${item.id}&type=8`,
				});
			},
			// 一键求助
			makeHelpCall() {
				if (!this.selectedLocation || this.selectedLocation.value === 0) {
					uni.showToast({
						title: this.$t("home.help.selectArea"),
						icon: "none",
					});
					return;
				}

				// 查找当前区域的求助电话
				const currentLocation = this.locationList.find(
					(item) => item.value === this.selectedLocation.value
				);
				if (
					!currentLocation ||
					!currentLocation.serviceLine ||
					currentLocation.serviceLine.length === 0
				) {
					uni.showToast({
						title: this.$t("home.help.noHelpline"),
						icon: "none",
					});
					return;
				}

				// 显示电话选择列表
				uni.showActionSheet({
					itemList: currentLocation.serviceLine.map((item) => item.name),
					success: (res) => {
						const selectedPhone = currentLocation.serviceLine[res.tapIndex].value;
						uni.makePhoneCall({
							phoneNumber: selectedPhone,
							success: () => {
								console.log("拨打电话成功");
							},
							fail: (err) => {
								console.error("拨打电话失败:", err);
								uni.showToast({
									title: this.$t("home.help.callFailed"),
									icon: "none",
								});
							},
						});
					},
				});
			},

			// 更新当前区域
			updateCurrentArea(area) {
				this.currentArea = area;
			},
			// 语言切换
			switchLanguage() {
				uni.showActionSheet({
					itemList: this.languageOptions.map((item) => item.label),
					success: (res) => {
						const selectedLanguage = this.languageOptions[res.tapIndex].value;
						// 如果选择的语言与当前语言不同，则切换
						if (selectedLanguage !== this.currentLanguage) {
							this.currentLanguage = selectedLanguage;
							// 保存语言设置到本地存储
							uni.setStorageSync("language", selectedLanguage);
							// 设置i18n语言
							this.$i18n.locale = selectedLanguage;
						}
					},
				});
			},
			jumpImgUrl(index) {
				const find = this.uavData[index];
				let url;
				switch (find.skipType) {
					case 'empty':
						return;
					case 'mapp':
						const {
							appId, path
						} = JSON.parse(find.linkUrl);
						uni.navigateToMiniProgram({
							appId,
							path
						});
						return;
					case 'path':
						url = find.linkUrl;
						break;
					case 'url':
						url = `/pages/webView/webView?url=${find.linkUrl}`;
						break;
					default:
						break;
				}
				if (url) uni.navigateTo({
					url
				});
			}
		},
	};
</script>

<template>
	<z-paging ref="paging" v-model="zone" :auto="false" height="100vh"
		:paging-style="{ minHeight: '100vh', backgroundColor: '#E2F9FF' }" :default-page-size="6"
		:auto-scroll-to-top-when-reload="false" :fixed="false" @query="queryList" @onRefresh="refresh"
		:show-scrollbar="false">
		<view class="header">
			<u-swiper :list="bannerUrl" indicatorMode="dot" indicator indicatorStyle="bottom: 70rpx" height="450rpx"
				@click="jumpBanner"></u-swiper>
			<image class="header-logo" :src="logo" mode="widthFix" :style="{ top: safeAreaTop + 'px' }"></image>
			<view class="weather-info">
				<view v-if="!weather">{{ $t("home.weather.noWeather") }}</view>
				<image :src="weather.imgurl" class="weather-img" mode="aspectFit" v-if="weather"></image>
				<view class="weather-info_inner" v-if="weather">
					<text class="temperature">{{ weather.temperature }}{{ $t("home.weather.degree") }}</text>
					<text class="weather-text">{{ weather.weather }}&nbsp;&nbsp;{{ weather.winddirection
            }}{{ $t("home.weather.wind") }}{{ weather.windpower }}级</text>
				</view>
			</view>
		</view>
		<!-- 位置选择器 -->
		<view class="location-selector" @click="openLocationSelector"
			:style="{ '--top-position': safeAreaTop + 60 + 'px' }">
			<text class="location-text">{{ selectedLocation.title }}</text>
			<view class="location-arrow"></view>
		</view>
		<!-- 	<view class="location-selector" @click="openLocationSelector" :style="{'--top-position': (safeAreaTop) + 'px'}">
			<text class="location-text">{{selectedLocation.title}}</text>
			<view class="location-arrow"></view>
		</view> -->
		<!-- 语言选择器 -->
		<!-- 	<view class="language-selector" @click="switchLanguage" :style="{'--top-position': (safeAreaTop + 60) + 'px'}">
			<text class="language-text">{{currentLanguage === 'zh-CN' ? '中' : 'EN'}}</text>
		</view> -->
		<view class="bg">
			<!-- 景区公告 -->
			<view class="notice-bar section-container animate-on-load" @click="jumpAnnouncement()"
				:class="{ loaded: initialStates.announcement }">
				<notice-bar :content="announcement" color="#666666" scrollable>
					<template #right>
						<view style="padding: 0 20rpx">
							<image src="/static/home/right-arrow-black.png" style="height: 24rpx; width: 13rpx"></image>
						</view>
					</template>
				</notice-bar>
			</view>

			<!-- 主要功能区块 -->
			<view class="function-blocks section-container animate-on-load"
				:class="{ loaded: initialStates.fastService }">
				<view class="function-item function-blocks-l function-blocks-item"
					@click="menuJumpHandle(fastService[0])">
					<image :src="
              fastService && fastService.length > 0 ? fastService[0].img : ''
            " mode="scaleToFill">
					</image>
				</view>
				<view class="function-blocks-r function-blocks-item">
					<view class="function-item" @click="menuJumpHandle(fastService[1])">
						<image :src="
                fastService && fastService.length > 1 ? fastService[1].img : ''
              " mode="scaleToFill"></image>
					</view>
					<!-- <view class="function-item" @click="menuJumpHandle(fastService[2])">
						<image :src="fastService && fastService.length > 2 ? fastService[2].img : ''"
							mode="scaleToFill"></image>
					</view> -->
					<view class="function-item" @click="developing">
						<!-- <view class="function-item" @click="menuJumpHandle(fastService[2])"> -->
						<image :src="
                fastService && fastService.length > 2 ? fastService[2].img : ''
              " mode="scaleToFill"></image>
					</view>
				</view>
			</view>

			<!-- 图标菜单 -->
			<view class="section-container animate-on-load noBottomM" :class="{ loaded: initialStates.menu }">
				<view class="icon-menu">
					<view class="icon-item" v-for="(item, index) in menu" :key="index" @click="menuJumpHandle(item)">
						<image :src="item.icon" mode="widthFix"></image>
						<text>{{ item.title }}</text>
					</view>
				</view>
			</view>

			<view class="section-container">
				<u-swiper :list="imgUrlList" indicatorMode="dot" indicator indicatorStyle="bottom: 20rpx"
					height="146rpx" @click="jumpImgUrl" />
			</view>

			<!-- 海岛景点介绍 -->
			<view class="section-container animate-on-load" :class="{ loaded: initialStates.spotList }">
				<view class="section-header">
					<view class="section-header-tabs">
						<view class="section-title active-title">{{
              $t("home.section.island")
            }}</view>
					</view>
					<view class="more" @click="jumpScenicSpotList">
						<text>{{ $t("home.section.allAttractions") }}</text>
						<image src="/static/home/right-arrow.png" class="more_icon"></image>
					</view>
				</view>
				<view class="spot-list">
					<view class="spot-list-item">
						<!-- <image src="https://wzws.wanshanlundiao.cn/upload/img/ws_static/index/wzhd/1.png"
							mode="widthFix" class="spot-list-item-img" @click="jumpScenicSpot('桂山岛')" /> -->
						<video :src="imgUrl + '/upload/img/ws_static/index/wzhd/01.mp4'"
							class="spot-list-item-img custom-video" objectFit="fill" @click="jumpScenicSpot('桂山岛')"
							autoplay loop muted playsinline x5-playsinline :controls="false"
							poster="https://wzws.wanshanlundiao.cn/upload/img/ws_static/index/wzhd/1.png"></video>
					</view>
					<view class="spot-list-item">
						<!-- <image src="https://wzws.wanshanlundiao.cn/upload/img/ws_static/index/wzhd/2.png"
							mode="widthFix" class="spot-list-item-img" @click="jumpScenicSpot('东澳岛')" /> -->
						<video :src="imgUrl + '/upload/img/ws_static/index/wzhd/02.mp4'"
							class="spot-list-item-img custom-video" objectFit="fill" @click="jumpScenicSpot('东澳岛')"
							autoplay loop muted playsinline x5-playsinline webkit-playsinline :controls="false"
							poster="https://wzws.wanshanlundiao.cn/upload/img/ws_static/index/wzhd/2.png"></video>
					</view>
					<view class="spot-list-item">
						<!-- <image src="https://wzws.wanshanlundiao.cn/upload/img/ws_static/index/wzhd/3.png"
							mode="widthFix" class="spot-list-item-img" @click="jumpScenicSpot('外伶仃岛')" /> -->
						<video :src="imgUrl + '/upload/img/ws_static/index/wzhd/03.mp4'"
							class="spot-list-item-img custom-video" objectFit="fill" @click="jumpScenicSpot('外伶仃岛')"
							autoplay loop muted playsinline x5-playsinline webkit-playsinline :controls="false"
							poster="https://wzws.wanshanlundiao.cn/upload/img/ws_static/index/wzhd/3.png"></video>
					</view>
					<view class="spot-list-item">
						<!-- <image src="https://wzws.wanshanlundiao.cn/upload/img/ws_static/index/wzhd/4.png"
							mode="widthFix" class="spot-list-item-img" @click="jumpScenicSpot('大万山岛')" /> -->
						<video :src="imgUrl + '/upload/img/ws_static/index/wzhd/04.mp4'"
							class="spot-list-item-img custom-video" objectFit="fill" @click="jumpScenicSpot('大万山岛')"
							autoplay loop muted playsinline x5-playsinline webkit-playsinline :controls="false"
							poster="https://wzws.wanshanlundiao.cn/upload/img/ws_static/index/wzhd/4.png"></video>
					</view>
				</view>
			</view>

			<!-- 热门活动 -->
			<view class="section-container animate-on-load" :class="{ loaded: initialStates.activeGuide }">
				<view class="section-header">
					<view class="section-header-tabs">
						<view class="section-title active-title">{{
              $t("home.section.hotActivities")
            }}</view>
					</view>
					<view class="more" @click="jumpActivitiesOrRaiders('2')">
						<text>{{ $t("home.section.viewMore") }}</text>
						<image src="/static/home/right-arrow.png" class="more_icon"></image>
					</view>
				</view>
				<scroll-view :scroll-x="true">
					<view class="travel-guide-list">
						<view v-for="(item, index) in activeGuide" :key="index" class="travel-guide-item"
							@click="jumpActivity(item)">
							<view class="travel-guide-top">
								<image :src="item.image" mode="aspectFill"></image>
								<view class="travel-guide-tag" v-if="item.tag">
									<text>{{ item.tag }}</text>
								</view>
							</view>
							<view class="travel-guide-title">
								<text>#</text>
								<text class="title-text">{{ item.title }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 旅游攻略 -->
			<view class="section-container animate-on-load" :class="{ loaded: initialStates.travelGuide }">
				<view class="section-header">
					<view class="section-header-tabs">
						<view class="section-title" :class="{ 'active-title': activeGuideTab === 0 }"
							@click="switchGuideTab(0)">{{ $t("home.section.travelGuide") }}</view>
					</view>
					<view class="more" @click="jumpActivitiesOrRaiders">
						<text>{{ $t("home.section.viewMore") }}</text>
						<image src="/static/home/right-arrow.png" class="more_icon"></image>
					</view>
				</view>
				<scroll-view :scroll-x="true">
					<view class="travel-guide-list">
						<view v-for="(item, index) in travelGuide" :key="index" class="travel-guide-item"
							@click="attractionDetails(item.id, 2)">
							<view class="travel-guide-top">
								<image :src="item.image" mode="aspectFill"></image>
								<view class="travel-guide-tag" v-if="item.tag">
									<text>{{ item.tag }}</text>
								</view>
							</view>
							<view class="travel-guide-title">
								<text>#</text>
								<text class="title-text">{{ item.title }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 专区 -->
			<view class="food-shop-section section-container animate-on-load" :class="{ loaded: initialStates.zone }">
				<view class="section-tabs">
					<view class="tab" :class="{ active: activeTabs === 0 }" @click="switchTabs(0)">
						<text class="tab-title">{{ $t("home.zone.eating") }}</text>
						<!-- <view class="tab-title_sub">
							<image src="https://wzws.wanshanlundiao.cn/upload/img/20250523/202505231650295723.png">
							</image>
							<text>{{$t('home.zone.selected')}}</text>
						</view> -->
					</view>
					<view class="tab" :class="{ active: activeTabs === 1 }" @click="switchTabs(1)">
						<text class="tab-title">{{ $t("home.zone.living") }}</text>
						<!-- <view class="tab-title_sub">
							<image src="https://wzws.wanshanlundiao.cn/upload/img/20250523/202505231650438067.png">
							</image>
							<text>{{$t('home.zone.affordable')}}</text>
						</view> -->
					</view>
					<view class="tab" :class="{ active: activeTabs === 2 }" @click="switchTabs(2)">
						<text class="tab-title">{{ $t("home.zone.playing") }}</text>
						<!-- <view class="tab-title_sub">
							<image src="https://wzws.wanshanlundiao.cn/upload/img/20250523/202505231650509942.png">
							</image>
							<text>{{$t('home.zone.popular')}}</text>
						</view> -->
					</view>
				</view>
				<view class="food-shop-list">
					<view class="food-shop-item" v-for="(item, index) in zone" :key="index"
						@click="jumpMerchants(item.id, item.type)">
						<image :src="item.image" mode="aspectFill" class="food-shop_img"></image>
						<view class="food-shop-info">
							<view class="food-shop_store__logo">
								<!-- <image src="https://wzws.wanshanlundiao.cn/upload/img/20250324/202503241544468247.jpeg">
								</image> -->
								<image :src="tabsIcon" class="tabsIcon" mode="aspectFill">
								</image>
							</view>
							<view class="food-shop-info_inner">
								<view class="food-shop-name">{{ item.title }}</view>
								<view class="food-shop-tags" v-if="item.tags && item.tags.length">
									<text v-for="(tag, idx) in item.tags" :key="idx"
										class="food-shop-tag">{{ tag }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="food-shop-list" v-if="skeletonStates.zone">
					<view class="food-shop-item reserve-seat" v-for="i in 2" :key="i">
						<u-skeleton loading rows="3" :rows-width="['100%', '50%', '80%']" :rows-height="['260rpx']"
							:title="false"></u-skeleton>
					</view>
				</view>
			</view>
		</view>
		<template #bottom>
			<TabBar :isFixed="false"></TabBar>
			<hz-safe-area></hz-safe-area>
		</template>
		<!-- 一键求助按钮 -->
		<!--    <view class="help-btn" @click="makeHelpCall">-->
		<!--      <image src="https://wzws.wanshanlundiao.cn/upload/img/20250430/202504301818187448.png" mode="aspectFit"></image>-->
		<!--    </view>-->

		<view class="kefuBox">
			<view class="btnItem">
				<button class="kefuBtn" open-type="contact" bindcontact="handleContact" session-from="sessionFrom"
					style="background:none;border:none;box-shadow:none;padding:0;margin:0;color:#fff;">
					<image class="kefuIcon" :src="imgUrl + '/upload/img/ws_static/static/home/kefu.png'"
						mode="widthFix"></image>
				</button>
			</view>
			<view class="line">

			</view>
			<view class="btnItem">
				<button class="kefuBtn" @click="callPhone" session-from="sessionFrom"
					style="background:none;border:none;box-shadow:none;padding:0;margin:0;color:#fff;">
					<image class="kefuIcon" :src="imgUrl + '/upload/img/ws_static/static/home/phone.png'"
						mode="widthFix"></image>
				</button>
			</view>
		</view>

		<uni-popup ref="adsPopup" type="center" @change="changeAdsPopup">
			<view class="popupBox">
				<image @tap.stop="adsImgFN" class="popupImg" :src="adsData.imageUrl" mode="widthFix">
				</image>
				<view class="hotZone" v-if="adsData.hotZone" :style="{ top: adsData.hotZone.top }">
					<view class="hItem" v-for="(item, index) in adsData.hotZone.list" :key="index" @click="goLink(item)"
						:style="[{ marginTop: item.mTop }, { height: item.height }]">
					</view>
				</view>
				<view class="btnBox">
					<uni-icons @click="closeAdsPopup" type="close" size="40" color="#fff"></uni-icons>
				</view>
			</view>
		</uni-popup>
	</z-paging>
</template>

<style scoped lang="scss">
	.kefuBox {
		position: fixed;
		right: 20rpx;
		bottom: 340rpx;
		width: 80rpx;
		z-index: 3;
		background-color: #e2f9ff;
		opacity: .8;
		border-radius: 50rpx;
		.btnItem{
			width: 100%;
			padding: 30rpx 10rpx;
			box-sizing: border-box;
		}
		.line{
			width: 100%;
			height: 4rpx;
			background-color: #498fff;
		}
		
		.kefuBtn {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			&::after {
				border: none !important;
			}

			.kefuIcon {
				width: 100%;
			}
		}
	}

	.popupBox {
		width: 80vw;
		position: relative;

		.hotZone {
			position: absolute;
			width: 100%;
			left: 0;
			top: 0;

			.hItem {
				width: 100%;
				// background-color: red;
			}
		}

		.popupImg {
			width: 100%;
		}

		.btnBox {
			width: 100%;
			display: flex;
			justify-content: center;
			padding-top: 50rpx;
		}
	}

	/* 顶部区域 */
	.header {
		position: relative;
		z-index: 1;
		height: 450rpx;
		overflow: hidden;

		.header-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}

		.header-logo {
			position: absolute;
			top: 0;
			left: 24rpx;
			width: 82rpx;
			height: 58rpx;
		}

		.weather-info {
			position: absolute;
			bottom: 90rpx;
			right: 0;
			width: 259rpx;
			height: 88rpx;
			color: #ffffff;
			text-align: right;
			display: flex;
			align-items: center;
			background-color: rgba(0, 172, 244, 0.39);
			border-radius: 44rpx 0 0 44rpx;

			.weather-img {
				width: 58rpx;
				height: 58rpx;
				margin-right: 10rpx;
				margin-left: 15rpx;
			}

			.weather-info_inner {
				display: flex;
				flex-direction: column;
				align-items: self-start;

				.temperature {
					font-size: 40rpx;
					font-weight: 600;
					line-height: 56rpx;
				}

				.weather-text {
					font-size: 22rpx;
				}
			}
		}

		.header-right {
			position: absolute;
			top: 80rpx;
			right: 30rpx;

			.icon-search {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.bg {
		position: relative;
		z-index: 2;
		border-radius: 40rpx 40rpx 0 0;
		padding: 20rpx 0 20rpx 0;
		margin-top: -48rpx;
		background-color: #e2f9ff;
		width: 100vw;
	}

	/* 区域公共样式 */
	.section-container {
		padding: 0 20rpx;
		margin-bottom: 30rpx;
		border-radius: 12rpx;
		overflow: hidden;
		width: 100%;

		&.noBottomM {
			margin-bottom: 0;
		}
	}

	.uavImg {
		width: 100%;
	}

	/* 添加动画关键帧 */
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes fadeInRight {
		from {
			opacity: 0;
			transform: translateX(-20rpx);
		}

		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	/* 景区公告 */
	.notice-bar {
		animation: fadeInUp 0.5s ease-out;
		animation-fill-mode: both;
		animation-delay: 0.1s;
	}

	/* 主要功能区块 */
	.function-blocks {
		animation: fadeInUp 0.5s ease-out;
		animation-fill-mode: both;
		animation-delay: 0.2s;
	}

	/* 图标菜单 */
	.icon-menu {
		animation: fadeInUp 0.5s ease-out;
		animation-fill-mode: both;
		animation-delay: 0.3s;
	}

	/* 海岛景点介绍 */
	.spot-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		&-item {
			width: calc(50% - 10rpx);
			margin-bottom: 20rpx;
		}
	}

	/* 旅游攻略 */
	.travel-guide-list {
		display: flex;
		gap: 20rpx;

		.travel-guide-item {
			flex-shrink: 0;
			width: 300rpx;
			height: 330rpx;
			overflow: hidden;
			position: relative;
			border-radius: 12rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			box-shadow: 3rpx 4rpx 10rpx 0 rgba(177, 190, 211, 0.11);
			opacity: 0;
			transform: translateX(-20rpx);
			animation: fadeInRight 0.5s ease-out forwards;

			@for $i from 1 through 5 {
				&:nth-child(#{$i}) {
					animation-delay: #{0.1 * $i}s;
				}
			}

			.travel-guide-top {
				position: relative;
				width: 300rpx;
				height: 240rpx;
				border-radius: 12rpx;
				overflow: hidden;
				flex-shrink: 0;

				image {
					width: 300rpx;
					height: 240rpx;
				}

				.travel-guide-tag {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					font-size: 26rpx;
					line-height: 45rpx;
					color: #fff;
					border: 1px solid rgba(255, 255, 255, 0.57);
					width: 146rpx;
					height: 45rpx;
					text-align: center;
					border-radius: 25rpx;
					backdrop-filter: blur(10rpx);
				}
			}

			.travel-guide-title {
				display: flex;
				font-size: 28rpx;
				color: #333333;
				font-weight: 500;
				line-height: 42rpx;
				flex: 1;
				align-items: center;
				padding: 0 20rpx;

				text:first-child {
					color: #ff6b0d;
					flex-shrink: 0;
				}

				.activity-price {
					color: #ff4b31;
					font-weight: bold;
					margin-right: 10rpx;
					flex-shrink: 0;
				}

				.title-text {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 100%;
				}
			}
		}

		.activity-item {
			.travel-guide-tag {
				background-color: rgba(255, 75, 49, 0.2);
			}
		}
	}

	/* 餐饮商店区域 */
	.food-shop-section {
		animation: fadeInUp 0.5s ease-out;
		animation-fill-mode: both;
		animation-delay: 0.6s;
	}

	/* 添加动画控制类 */
	.animate-on-load {
		opacity: 0;
		transform: translateY(20rpx);
		transition: all 0.5s ease-out;
	}

	.animate-on-load.loaded {
		opacity: 1;
		transform: translateY(0);
	}

	/* 景区公告 */
	.notice-bar {
		.notice-title {
			color: #fff;
			height: 100%;
			font-size: 32rpx;
			background-image: linear-gradient(245deg, #ffb28c 0%, #ff3f22 100%);
		}

		.notice-content {
			flex: 1;
			font-size: 26rpx;
			color: #666;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.notice-arrow {
			width: 30rpx;
			height: 30rpx;
			margin-left: 10rpx;
		}
	}

	/* 主要功能区块 */
	.function-blocks {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		height: 300rpx;

		.function-blocks-item {
			flex: 1;
		}

		.function-blocks-r {
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;

			.function-item {
				flex: 1;
			}

			.function-item:last-child {
				margin-top: 20rpx;
			}
		}

		.function-item {
			background-color: #f7f9fc;
			border-radius: 16rpx;
			padding: 20rpx;
			box-sizing: border-box;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
			position: relative;

			image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			.function-text {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
			}

			.function-desc {
				font-size: 22rpx;
				color: #999;
				margin-top: 5rpx;
			}
		}
	}

	/* 图标菜单 */
	.icon-menu {
		display: flex;
		flex-wrap: wrap;
		background-color: #ebfbff;
		padding: 20rpx 15rpx;
		margin-bottom: 30rpx;
		border-radius: 16rpx;
		border: 1px solid rgba(255, 255, 255, 1);
		box-shadow: 0 3rpx 0 0 rgba(255, 255, 255, 1);

		.icon-item {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 20rpx;

			image {
				width: 96rpx;
				height: 96rpx;
				margin-bottom: 10rpx;
			}

			text {
				font-size: 24rpx;
				color: #333;
			}
		}
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-bottom: 20rpx;

		.section-header-tabs {
			display: flex;
			gap: 40rpx;
			align-items: flex-end;

			.section-title {
				position: relative;
				font-size: 30rpx;
				color: #666666;
				font-weight: 400;
			}

			.active-title {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
			}

			.active-title::before {
				content: "";
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 120rpx;
				height: 15rpx;
				background-image: url("https://wzws.wanshanlundiao.cn/upload/img/20250407/202504071103413522.png");
				background-repeat: no-repeat;
				background-size: cover;
			}
		}

		.more {
			font-size: 26rpx;
			color: #90949c;
			display: flex;
			align-items: center;
			gap: 10rpx;

			.more_icon {
				width: 12rpx;
				height: 22rpx;
				transform: translateY(1rpx);
			}
		}
	}

	/* 餐饮商店区域 */
	.food-shop-section {
		box-shadow: 0px -3px 0px 0px rgba(255, 255, 255, 1);
		background-image: linear-gradient(180deg,
				rgba(255, 255, 255, 0.55) 14%,
				rgba(255, 255, 255, 0) 100%);
		border-radius: 30rpx;
		margin-bottom: 0;
		width: 100%;

		.section-tabs {
			display: flex;
			margin-bottom: 20rpx;
			gap: 30rpx;

			.tab {
				flex: 1;
				padding: 15rpx 30rpx;
				border-bottom: 4rpx solid transparent;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #666666;
				transition: color 0.3s;

				&.active {
					color: #498fff;
					font-weight: 600;

					.tab-title_sub {
						background-color: rgba(0, 172, 244, 0.1);
					}
				}

				.tab-title {
					font-size: 36rpx;
				}

				.tab-title_sub {
					font-size: 24rpx;
					background-color: #fff;
					border-radius: 34rpx;
					width: 103rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 400;
					margin-top: 10rpx;

					image {
						width: 23rpx;
						height: 23rpx;
						margin-right: 5rpx;
					}
				}
			}
		}
	}

	.food-shop-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.food-shop-item {
			width: calc(50% - 10rpx);
			background-color: #fff;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
			display: flex;
			flex-direction: column;
			opacity: 0;
			transform: translateY(20rpx);
			animation: fadeInUp 0.5s ease-out forwards;

			@for $i from 1 through 6 {
				&:nth-child(#{$i}) {
					animation-delay: #{0.1 * $i}s;
				}
			}

			.food-shop_img {
				width: 100%;
				height: 260rpx;
				flex-shrink: 0;
				border-radius: 12rpx;
			}

			.food-shop-info {
				flex: 1;
				display: flex;
				padding: 15rpx;
				gap: 15rpx;

				.food-shop_store__logo {
					width: 54rpx;
					flex-shrink: 0;

					image {
						width: 54rpx;
						height: 54rpx;
						border-radius: 50%;
						box-shadow: 4rpx 4rpx 6rpx 0 rgba(0, 0, 0, 0.1);
						transform: translateY(-20rpx);
					}
				}

				.food-shop-info_inner {
					flex: 1;

					.food-shop-name {
						font-size: 26rpx;
						color: #333;
						margin-bottom: 5rpx;
					}

					.food-shop-tags {
						margin-top: 6rpx;
						display: flex;
						flex-wrap: wrap;
						gap: 8rpx;

						.food-shop-tag {
							font-size: 20rpx;
							color: #9b5734;
							background: #fff4e6;
							border-radius: 6rpx;
							padding: 2rpx 10rpx;
						}
					}
				}
			}
		}
	}

	.reserve-seat {
		background-color: transparent !important;
		box-shadow: none !important;
	}

	/* 位置选择器样式 */
	.location-selector {
		position: absolute;
		left: 0;
		top: var(--top-position, 120rpx);
		z-index: 100;
		background: rgba(255, 255, 255, 0.8);
		padding: 10rpx 20rpx;
		border-radius: 0 30rpx 30rpx 0;
		display: flex;
		align-items: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
	}

	.location-text {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}

	.location-arrow {
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 10rpx 6rpx 0 6rpx;
		border-color: #333 transparent transparent transparent;
		margin-left: 10rpx;
	}

	.header {
		position: relative;
		height: 450rpx;
		width: 100%;
	}

	.help-btn {
		position: fixed;
		right: 30rpx;
		bottom: 190rpx;
		width: 120rpx;
		height: 120rpx;
		background: linear-gradient(135deg, #ff7764 0%, #ff6b31 100%);
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 16rpx rgba(255, 75, 49, 0.3);
		z-index: 999;

		&::before {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background: inherit;
			animation: ripple 2s infinite;
			opacity: 0.6;
		}

		&::after {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background: inherit;
			animation: ripple 2s infinite 1s;
			opacity: 0.6;
		}

		image {
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 1;
		}

		text {
			font-size: 24rpx;
			color: #fff;
			position: relative;
			z-index: 1;
		}
	}

	@keyframes ripple {
		0% {
			transform: scale(1);
			opacity: 0.6;
		}

		100% {
			transform: scale(1.5);
			opacity: 0;
		}
	}

	/* 语言选择器样式 */
	.language-selector {
		position: absolute;
		right: 0;
		top: var(--top-position, 180rpx);
		z-index: 100;
		background: rgba(255, 255, 255, 0.8);
		padding: 10rpx 20rpx;
		border-radius: 30rpx 0 0 30rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
	}

	.language-text {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}

	.spot-list-item-img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 2/1;
		object-fit: cover;
		display: block;
		border-radius: 10rpx;
		// background: #000;
	}

	.custom-video::-webkit-media-controls {
		display: none !important;
	}

	.custom-video::-webkit-media-controls-enclosure {
		display: none !important;
	}

	.custom-video::-webkit-media-controls-panel {
		display: none !important;
	}
</style>